<template>
  <div id="login"
       v-loading="loading">
    <!-- 头部 -->
    <div class="header">
      <div class="header-con">
        <div class="header-logo">
          <div class="header-logo-con">
            <img src="../../../static/images/logo2.png"
                 alt>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="main">
      <div class="main-img"
           @click="toHome">
        <div class="img-div">
          <img src="../../../static/images/login/login_bg.png"
               alt>
        </div>
      </div>

      <div class="main-from">
        <!-- 表单内容 -->
        <div class="from-con">
          <!-- 登录标题 -->
          <div class="from-title">立即登录</div>
          <!-- 登录输入内容 -->
          <el-form :model="ruleForm"
                   status-icon
                   :rules="rules"
                   ref="ruleForm"
                   class="demo-ruleForm">
            <!-- 手机号 -->
            <el-form-item label=""
                          prop="phone">
              <el-input v-model.number="ruleForm.phone"
                        placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label=""
                          prop="pass">
              <el-input type="password"
                        v-model="ruleForm.pass"
                        placeholder="请输入密码"
                        autocomplete="off"
                        @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-form-item>
            <!-- 提交 -->
            <el-form-item class="demo-submit-con">
              <div class="demo-submit-btn"
                   type="primary"
                   @click="submitForm('ruleForm')">登录</div>
            </el-form-item>
          </el-form>
          <!-- 免费注册和忘记密码 -->
          <!-- <div class="from-err">
                    <div class="from-err-text">手机号或密码错误</div>
                </div> -->
          <div class="from-bottom">
            <span class="from-resgiter"
                  @click="toResgiter">免费注册</span>
            <span class="from-forget"
                  @click="toFind">忘记密码</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import check from "@/components/check/Check";
export default {
  data () {
    // 检测手机号码
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    // 检测密码
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      // token
      token: '',
      // 规则字段
      ruleForm: {
        pass: '',
        phone: ''
      },
      // 规则对象与方法
      rules: {
        pass: [
          { validator: validatePass, trigger: 'change' }
        ],
        phone: [
          { validator: checkPhone, trigger: 'change' }
        ]
      },

      // 用户信息
      userInfo: ''
    };
  },
  methods: {
    // 登录
    login () {
      this.loading = true;
      this.$http.post(this.$api.login, this.$qs.stringify({
        dd_phone: this.ruleForm.phone,
        dd_password: this.ruleForm.pass
      })).then(res => {
        if (res.data.code == 0) {
          console.log('res', res);
          // 保存token
          this.token = res.data.access_token;
          this.$store.commit('set_token', this.token);
          this.$store.commit('set_username', this.ruleForm.phone);
          this.loading = false;
          this.toHome();
          // 保存用户信息
          // this.getUserInfo();
        } else if (res.data.code == -1) {
          this.loading = false;
          this.$notify.error({ title: '登录失败', message: '手机号或密码错误!' });
        }
      });
    },
    // 获取用户信息
    getUserInfo () {
      this.$http.post(this.$api.getUserInfo, this.$qs.stringify({
        access_token: this.token
      })).then(res => {
        if (res.data.code == 0) {
          let userInfoStr = res.data.data;
          let userInfo = JSON.stringify(userInfoStr);
          this.$store.commit('set_userInfo', userInfo);
          this.toHome();
        }
      });
    },
    // 登录验证
    submitForm (formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    // 跳转到找回密码页
    toFind () {
      this.$router.push({ path: '/find' });
    },
    // 跳转到注册页
    toResgiter () {
      this.$router.push({ path: '/resgiter' });
    },
    // 跳转到注册页
    toHome () {
      if (this.$route.query.redirect) {
        this.$router.push({ path: this.$route.query.redirect });
      } else {
        this.$router.push({ path: '/' });
      }
    }
  }
};
</script>

<style lang="scss">
  // 去除按钮默认样式
@mixin clearBtn{
    border: 0;
    background-color: transparent;
    outline: none;
}

// 图片居中显示
@mixin imgCenter{
    width:100%;
    height: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    &>img{
        width:100%;
    }
}

// 自定义输入框样式
@mixin inputClass{
    height:42px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(204,204,204,1);
    border-radius:2px;
    padding-left:15px;
}
#login {
    // 头部logo部分
    height: 100%;
    .header {
        width: 100%;
        background: #2878FF;
        box-shadow:0px 5px 5px 0px rgba(225,229,237,1);
        .header-con {
            width: 1200px;
            margin: 0 auto;
            .header-logo {
                width: 240px;
                height: 120px;
                position: relative;
                .header-logo-con {
                    cursor: pointer;
                    @include imgCenter;
                }
            }
        }
    }
    // 主体部分
    .main {
        width: 100%;
        position: relative;
        // 背景图片
        .main-img {
            width:1200px;
            margin: 0 auto;
            position: relative;
            .img-div{
                position: absolute;
                top:100px;
                left:0;
                width:658px;
            }
           
        }
        // 登录内容框
        .main-from{
          width:1200px;
          margin: 0 auto;
          position: relative;
          .from-con {
            position: absolute;
            top: 160px;
            right: 0;
            width: 440px;
            height: 362px;
            background: rgba(255, 255, 255, 1);
            box-shadow:0px 13px 35px 0px rgba(225,229,237,1);
            // 登录标题
            .from-title {
              width: 340px;
              height: 44px;
              margin: 0 auto;
              margin-top: 30px;
              text-align: center;
              font-size: 28px;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
            }
            // 输入框包裹
            .demo-ruleForm {
              width: 340px;
              margin: 0 auto;
              margin-top: 30px;
              // 登录按钮
              .demo-submit-con {
                width: 100%;
                // 登录按钮
                .demo-submit-btn {
                  background: rgba(76, 136, 246, 1);
                  border-radius: 4px;
                  text-align: center;
                  font-weight: 400;
                  color: rgba(255, 255, 255, 1);
                  cursor: pointer;
                }
              }
            }
            // 错误提示
            .from-err {
              width: 340px;
              height: 30px;
              margin: 0 auto;
              .from-err-text {
                padding-top: 4px;
                color: #f56c6c;
                font-size: 12px;
              }
            }
            // 免费注册和忘记密码
            .from-bottom {
              width: 340px;
              height: 44px;
              margin: 0 auto;
              font-weight: 400;
              color: rgba(76, 136, 246, 1);
              font-size: 14px;
              .from-resgiter {
                float: left;
                cursor: pointer;
              }
              .from-forget {
                float: right;
                cursor: pointer;
              }
            }
          }
        }
        
    }
}

.el-form-item__content{
    margin-left:0 !important;
}
</style>



